<template>
  <div class="h100 wrap">
    <div class="wrap">
      <header>
        <span @click="showCarColor">
          {{ colorText }}
        </span>
        <span>|</span>
        <span @click="showCarType">
          {{ carTypeText }}
        </span>
      </header>
    </div>

    <div class="section">
      <!-- https://img3.bitautoimg.com/autoalbum/files/20210808/980/20210808847_8905422_{0}.JPG -->
      <!-- https://img3.bitautoimg.com/autoalbum/files/20210808/980/20210808847_8905422_3.JPG -->
      <section v-for="item in carListImg" :key="item.Id">
        <ul>
          <li
            v-for="(items, index) in item.List"
            :key="index"
            @click="imgDetail(index, item.Id)"
            :style="{
              backgroundImage: `url(${items.Url.split('{0}')[0]}3.JPG)`,
            }"
          >
            <p v-if="!index">
              <span>
                {{ item.Name }}
              </span>
              <span>{{ item.Count }}张></span>
            </p>
          </li>
        </ul>
      </section>
      <section v-show="carListImg.length === 0" class="no-content">
        <img src="//h5.chelun.com/2017/official/img/no-img.png" />
        <span>还没有内容</span>
      </section>
    </div>

    <!-- 车系颜色 -->
    <transition name="slide">
      <CarColor
        @changeImageColor="changeImageColor"
        :first="first"
        :ImageColor="ImageColor"
        v-show="isShowImageColor"
      >
        <p @click="showImgColor" class="all">全部颜色</p>
      </CarColor>
    </transition>

    <!-- 车系类型 -->
    <transition name="slide">
      <CarType
         @changeCarListImg="carTypeChangeList"
         v-show="isShowCarType">
        <p @click="hideCarType" class="all">全部车款</p>
      </CarType>
    </transition>

    <!-- 轮播组件 -->
    <MySwiper 
        :mySwiperList="mySwiperList" 
        :mySwiperCount="mySwiperCount" 
        @setSwiperFlag="flag => swiperFlag = flag"
        v-show="swiperFlag"/>
  </div>
</template>

<script>
import { getImageColor, getImageList, getCategoryImageList } from "@/api/carList";
import CarColor from "@/components/img/CarColor";
import CarType from "@/components/img/CarType";
import MySwiper from "@/components/img/MySwiper";
export default {
  data() {
    return {
      // 控制车系颜色组件显示隐藏
      isShowImageColor: false,
      // 控制车系类型组件显示隐藏
      isShowCarType: false,
      //储存颜色列表
      ImageColor: {},
      // 定义车系图片
      carListImg: [],
      // 颜色文本
      colorText: "全部颜色",
      // 车系类型文本
      carTypeText: "车款",
      // 车系颜色第一项
      first: null,
      // 
      carInfo: {
        SerialID: this.$route.params.id,
        ColorID: "",
        CarID: ""
      },
      swiperFlag: false,
      pageInfo: {
        Page: 1,
        PageSize: 30
      },
      mySwiperList: [],
      mySwiperCount: 0
    };
  },
  components: {
    CarColor,
    CarType,
    MySwiper
  },
  async created() {
    this.init();
    let res = await getImageColor({
      SerialID: this.$route.params.id,
    });
    //  记录首次选中颜色的内容
    this.first = Object.keys(res.data.data)[0];
    console.log(this.first);
  },
  methods: {
    // 初始化
    async init() {
      let res = await getImageList({
        ...this.carInfo
      });
      this.carListImg = res.data.data;
    },

    //  展示颜色组件
    async showCarColor() {
      this.isShowImageColor = true;
      let res = await getImageColor({
        SerialID: this.$route.params.id,
      });
      this.ImageColor = res.data.data;
    },

    // 展示车系类型组件
    async showCarType() {
      this.isShowCarType = true
    },
    
    // 子组件修改父组件状态
    async changeImageColor(info) {
      this.isShowImageColor = info.flag;
      this.colorText = info.name;
      // let res = await getImageList({
      //   SerialID: this.$route.params.id,
      //   ColorID: info.ColorId,
      // });
      // this.carListImg = res.data.data;
      this.carInfo.ColorID = info.ColorId
      this.init()
    },
    async showImgColor() {
      this.isShowImageColor = false;
      this.colorText = "全部颜色";
      // let res = await getImageList({
      //   SerialID: this.$route.params.id,
      // });
      // this.carListImg = res.data.data;
      // 清空颜色id
      this.carInfo.ColorID = ""
      this.init()
    },
    // 隐藏车系类型组件
    async hideCarType() {
      this.isShowCarType = false;
      this.carTypeText = "车款"
      this.init()
    },
    carTypeChangeList({ list, flag, text }) {
        this.carListImg = list
        this.isShowCarType = flag
        this.carTypeText = text
    },
    // 图片详情
    async imgDetail(index, ImageID) {
      if (!index) {

      } else {
        this.swiperFlag = true
        let res = await getCategoryImageList({
          SerialID: this.$route.params.id,
          ImageID,
          ...this.pageInfo
        })
        this.mySwiperList = res.data.data
        this.mySwiperCount = index + 1
         console.log("准备查看图片详情")
      }
     
    }
  },
};
</script>

<style scoped lang="scss">
.wrap {
  background: #f4f4f4;
  min-height: 100%;
}

.section {
  position: absolute;
  top: 40px;
}
header {
  position: fixed;
  background: #fff;
  top: 0;
  width: 100%;
  height: 40px;
  z-index: 99;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  span:first-child,
  span:last-child {
    width: 40%;
    height: 100%;
    text-align: center;
    line-height: 40px;
    position: relative;
    &:before {
      content: "";
      display: inline-block;
      width: 10px;
      height: 10px;
      border-top: none;
      border-right: 1px solid #aaa;
      border-bottom: 1px solid #aaa;
      border-left: none;
      position: absolute;
      right: 15px;
      top: 40%;
      transform: rotate(45deg) translateY(-50%);
    }
    padding-right: 3px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
}
// section:nth-child(2) {
//   padding-top: 40px;
// }
ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 3px;
  p {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(81, 56, 130, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    span:first-child {
      font-size: 0.28px;
      color: #fff;
    }
    span:last-child {
      font-size: 13px;
      color: #fff;
      margin-top: 6px;
    }
  }
}
li {
  position: relative;
  width: 123px;
  height: 123px;
  padding: 0;
  background-size: cover;
  background-position: center;
  margin-top: 3px;
}
.all {
  margin: 8px 0;
  font-size: 17px;
  color: #00afff;
  background: #fff;
  text-align: center;
  line-height: 40px;
  height: 40px;
}

.no-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  img {
    margin-top: 60px;
    width: 87px;
  }
  span {
    margin-top: 15px;
    color: silver;
  }
}
</style>